<template>
	<view class="news-group" :class="themeName" :style="{
      margin: `-${$px2rpx(styles.margin / 2)}rpx`,
      'background-color': styles.content_bg_color,
      'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`,
      padding: `${$px2rpx(styles.padding / 2)}rpx`,
    }">
		<view class="news-lists" :class="{
		  lists: content.style == 1,
		  rightlists: content.style == 2,
		  larger: content.style == 3,
		  perline: content.style == 4,
		  perlineThird: content.style == 5,
      }">
			<view class="news-wrap" v-for="(item, index) in goods" :key="index" @tap="navigate(item)">
				<view class="news-item" :style="{
            'background-color': styles.bg_color,
            margin: `${$px2rpx(styles.margin / 2)}rpx`,
            'border-radius': `${$px2rpx(styles.goods_border_radius)}rpx`,
          }">
					<view class="news-image">
						<view class="u-image" v-if="content.show_thumbnail">
							<u-image :src="item.image" width="100%" height="100%" />
						</view>
					</view>
					<view class="news-info p-10">
						<view v-if="content.show_category && content.style != 3" :style="{
              color: styles.category_color,
              'font-size': $px2rpx(styles.category_size)+'rpx',
            }">
							<u-icon name="grid" size="28" :color="styles.category_icon_color" class="m-r-5" />
							{{ item.cid_desc }}
						</view>
						<view v-if="content.show_title" class="m-b-8 name" :style="{
                color: styles.title_color,
              }">
							<view :class="content.style == 3 ? 'line-1' : 'line-2'" :style="{
                'font-size': $px2rpx(styles.title_size)+'rpx',
              }">
								{{ item.title }}
							</view>
						</view>
						<view v-if="content.show_desc" class="m-b-4 desc" :style="{
					color: styles.desc_color,
              }">
							<view class="line-2" :style="{
					'font-size': $px2rpx(styles.desc_size)+'rpx',}">
								{{ item.synopsis }}
							</view>
						</view>
						<view class="flex row-between" v-if="content.style != 5">
							<view :style="{
                color: styles.datetime_color,
                'font-size': $px2rpx(styles.datetime_size)+'rpx',
              }">
								<view v-if="content.show_datetime">
									<u-icon name="clock" size="28" :color="styles.datetime_icon_color" class="m-r-5" />
									{{ item.create_time2}}
								</view>
							</view>
							<view :style="{
                color: styles.visit_times_color,
                'font-size': $px2rpx(styles.visit_times_size)+'rpx',
              }">
								<view v-if="content.show_visit_times">
									<u-icon name="eye" size="28" :color="styles.visit_times_icon_color" class="m-r-5" />
									{{ item.visit }}
								</view>
							</view>
							<view v-if="content.style == 3" :style="{
                color: styles.category_color,
                'font-size': $px2rpx(styles.category_size)+'rpx',
              }">
								<view v-if="content.show_category">
									<u-icon name="grid" size="28" :color="styles.category_icon_color" class="m-r-5" />
									{{ item.cid_desc}}
								</view>
							</view>

						</view>
						<view v-if="content.style == 5">
							<view class="m-t-5" :style="{
                color: styles.datetime_color,
                'font-size': $px2rpx(styles.datetime_size)+'rpx',
              }">
								<view v-if="content.show_datetime">
									<u-icon name="clock" size="28" :color="styles.datetime_icon_color" class="m-r-5" />
									{{ item.create_time2}}
								</view>
							</view>
							<view class="m-t-5" :style="{
                color: styles.visit_times_color,
                'font-size': $px2rpx(styles.visit_times_size)+'rpx',
              }">
								<view v-if="content.show_visit_times">
									<u-icon name="eye" size="28" :color="styles.visit_times_icon_color" class="m-r-5" />
									{{ item.visit }}
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	export default {
		components: {},
		props: {
			content: {
				type: [Object, Array],
			},
			styles: {
				type: [Object, Array],
			},
		},
		data() {
			return {};
		},
		computed: {
			goods() {
				const {
					data
				} = this.content;
				return data.length ? data : [];
			},
		},
		methods: {
			navigate(item) {
				this.$Router.push({
					path: "/bundle/pages/store_notice_detail/store_notice_detail",
					query: {
						id: item.id,
						type: 'article',
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.news-group {
		.news-lists {
			overflow: hidden;

			&.larger {
				.news-wrap {
					.news-item {
						.news-info {
							padding: 10px;
						}

						.news-image {
							padding-top: 46%;
						}
					}
				}
			}

			&.perline {
				display: flex;
				flex-wrap: wrap;

				.news-wrap {
					width: 50%;

					.news-info {

						.name,
						.desc {
							line-height: 36rpx;
							height: 72rpx;
						}
					}
				}
			}

			&.perlineThird {
				display: flex;
				flex-wrap: wrap;

				.news-wrap {
					width: calc(100% / 3);

					.news-info {

						.name,
						.desc {
							line-height: 18px;
							height: 36px;
						}
					}
				}
			}

			&.lists {
				.news-wrap {
					.news-item {
						flex-direction: row;

						.news-image {
							width: 266rpx;
							width: 266rpx;
							padding-top: 240rpx;
						}

						.news-info {
							position: relative;
							padding: 10px;

							.name,
							.desc {
								line-height: 18px;
								height: 36px;
							}
						}
					}
				}
			}

			&.rightlists {
				.news-wrap {
					.news-item {
						flex-direction: row-reverse;

						.news-image {
							width: 266rpx;
							width: 266rpx;
							padding-top: 120px;
						}

						.news-info {
							position: relative;
							padding: 10px;

							.name,
							.desc {
								line-height: 18px;
								height: 36px;
							}
						}
					}
				}
			}

			.news-wrap {
				overflow: hidden;

				.news-item {
					overflow: hidden;
					display: flex;
					flex-direction: column;
					position: relative;
					transform: translateY(0);

					.news-image {
						position: relative;
						width: 100%;
						padding-top: 100%;
						box-sizing: border-box;

						.u-image {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							width: 100%;
						}
					}

					.news-info {
						flex: 1;

						.name {
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>